<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../js/plugins/layui-v2.4.5/layui/css/layui.css" />
		<link rel="stylesheet" href="../css/reset.css" />
		<link rel="stylesheet" href="../css/center3.css" />
		<!--日历-->
		<link rel="stylesheet" href="../js/plugins/fullcalendar/fullcalendar.min.css" />
		<link rel="stylesheet" href="../js/plugins/fullcalendar/fullcalendar.print.min.css" />
	</head>
	<body>
		<div class="container">
			<!--上-->
			<div class="layui-row top layui-col-space10">
				<!--左侧-->
				<div class="layui-col-md3 left-side">
					<div class="layui-col-md12">
						<div class="header"><h3>工单数量 <span class="sign">周</span></h3></div>
						<div class="show-info">
							<h2>52个</h2>
							<p>同上周比较：<strong class="upper">+10个</strong><a href="javascript:;" class="fr a_blue">更多</a></p>
						</div>
					</div>
					<div class="layui-col-md12" style="margin-top: 5px;">
						<div class="header"><h3>在维修设备<span class="sign">周</span></h3></div>
						<div class="show-info">
							<h2>11个</h2>
							<p>同上周比较：<strong class="lower">-3个</strong><a href="javascript:;" class="fr a_blue">更多</a></p>
						</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="header"><h3>我的通知</h3></div>
					<div class="show-info todo_list">
						<div class="l-head">
							<span>待办事项</span>
							<span>类型</span>
							<span>通知时间</span>
						</div>
						<ul>
							<li><span>节点机房抢修</span><span class="upper">应急事件</span><span>10:35</span></li>
							<li><span>11层领导电脑维修</span><span class="upper">重点客户</span><span>10:00</span></li>
							<li><span>21层领导网络故障</span><span class="upper">重点客户</span><span>8:58</span></li>
						</ul>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="header"><h3>机房巡检<a href="javascript:;" class="fr a_blue">更多</a></h3></div>
					<div class="show-info inspecting_list">
						<div class="l-head">
							<span>机房</span>
							<span>状态</span>
							<span>巡检人</span>
							<span>巡检时间</span>
						</div>
						<ul>
							<li><span>网络机房</span><span><em class="layui-btn layui-btn-xs">未开始</em></span><span>张强</span><span>10:00</span></li>
							<li><span>网络机房</span><span><em class="layui-btn layui-btn-xs layui-btn-normal">未巡检</em></span><span>张强</span><span>8:00</span></li>
							<li><span>网络机房</span><span><em class="layui-btn layui-btn-xs layui-btn-normal">已开始</em></span><span>张强</span><span>6:00</span></li>
						</ul>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="header"><h3>我的日程</h3></div>
					<div class="show-info">
						<div id="calendar"></div>
					</div>
				</div>
			</div>
			<!--下-->
			<div class="layui-row bottom layui-col-space10">
				<div class="layui-col-md3">
					<div class="header"><h3>工单种类<span class="sign">周</span></h3></div>
					<div class="show-info" >
						<div id="orderEchart" style="width: 100%;height: 100%;"></div>
					</div>
				</div>
				<div class="layui-col-md6">
					<div class="header"><h3>工单种类<a href="javascript:;" class="fr a_blue">更多</a></h3></div>
					<div class="show-info" >
						<table id="table"></table>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="header"><h3>外包人员值班情况</h3></div>
					<div class="show-info" id="staff"></div>
				</div>
			</div>
		</div>
		<script src="../js/jquery-3.3.1.min.js"></script>
		<script src="../js/plugins/layui-v2.4.5/layui/layui.js"></script>
		<!--工单动态-->
		<script src="../js/center.js"></script>
		<!--饼图-->
		<script src="../js/plugins/echarts.js"></script>
		<script src="../js/pieChart2.js"></script>
		<!--日历-->
		<script src="../js/plugins/fullcalendar/moment.min.js"></script>
		<script src="../js/plugins/fullcalendar/fullcalendar.min.js"></script>
		<script src="../js/plugins/fullcalendar/zh-cn.js"></script>
		<script src="../js/calendar.js"></script>
		<script>
			$(function(){
				/*添加工单动态*/
				initOrderArr();
				/*在岗人员列表*/
				staffList();
				layui.use(['table','element'],function(){
					var table = layui.table,element = layui.element;;
					var data = [
							{title:'上不去网',position:'9层901',customerName:'李丽',type:1,manager:'张强',state:1,time:'2019.4.26 8:54'}
							]
					layui.table.render({
						elem: '#table'
						,height: 312
						,url: '' //数据接口
						,page: true //开启分页
						,cols: [[ //表头
						  {field: 'xh', title: '编号', width:80,align:'center'
							  ,templet:function(d){
								  return d.LAY_INDEX;
							  }}
						  ,{field: 'title', title: '标题',align:'center'}
						  ,{field: 'position', title: '位置', width:150,align:'center'}
						  ,{field: 'customerName', title: '客户', width:150,align:'center'}
						  ,{field: 'type', title: '分类', width:80,align:'center',
							templet:function (d) {
								var colors = ['#4ACACB','#FC8675','#5AB6DF'];
								var types = ['PC','网络','安全'];
								return `<span style="color:${colors[d.type]}">${types[d.type]}</span>`
							}
						  }
						  ,{field: 'state', title: '状态', width:80,align:'center',
							templet:function (d) {
								var colors = ['before','processing','resolved','closed'];
								var states = ['未分配','处理中','已解决','已关闭'];
								return `<span class="layui-btn layui-btn-xs ${colors[d.state]}">${states[d.state]}</span>`
							}
						  } 
						  ,{field: 'time', title: '创建日期', width: 150,align:'center'}
						]],
						data:data
					})
				})
			})
		</script>
	</body>
</html>
